<template>


  <a-input v-model="modelValue.address" placeholder="详细地址" style="width: 100%;">
    <template #append>
      <a-button type="primary" @click="mapCtr.open">
        <icon-location/>
        选择位置
      </a-button>
    </template>
  </a-input>

  <smart-map-selector v-if="mapCtr.show" v-model="modelValue" @close="mapCtr.close"/>

</template>


<script setup lang="ts" name="smart-addr">


import {reactive, defineModel} from "vue";

const modelValue = defineModel({
  type: Object,
  default: {adCode: "", address: "", city: "", district: "", lat: 0, lng: 0, province: "", township: ""},
  required: true,

})


const mapCtr = reactive({
  show: false,
  result: {},
  open: () => {
    mapCtr.result = modelValue.value
    mapCtr.show = true
  },
  close: (e) => {
    modelValue.value = {...e.data}
    mapCtr.show = false
  }
})


</script>


<style scoped lang="less">
:deep( .arco-input-append) {
  padding: 0;
}
</style>